<template>
  <div class="add-term-dialog">
    <div class="term-dialog-content">
      <div class="title">
        <p class="left">ラインクラス詳細情報</p>
        <i class="el-icon-close" @click="$emit('CloseTerm')"></i>
      </div>
      <div class="dialog-body">

        <div class="row">
          <p>ラインクラス</p>
          <el-input v-model="Data.codName" class="table-input yellow"
            @input="Data.codName = $setMaxLength(Data.codName, 20)" disabled>
          </el-input>
        </div>
        <div class="row">
          <p>レイティング</p>
          <el-input v-model="Data.raiting" class="table-input" :class="MacCode ? 'yellow' : ''"
            :disabled="Boolean(MacCode)" @input="Data.raiting = $setMaxLength(Data.raiting, 60)">
          </el-input>
        </div>
        <div class="row">
          <p>一般材質</p>
          <el-input v-model="Data.adminCost" class="table-input" :class="MacCode ? 'yellow' : ''"
            :disabled="Boolean(MacCode)" @input="Data.adminCost = $setMaxLength(Data.adminCost, 60)">
          </el-input>
        </div>
        <div class="row">
          <p>適用サービス</p>
          <el-input v-model="Data.aplcSvs" class="table-input" :class="MacCode ? 'yellow' : ''"
            :disabled="Boolean(MacCode)" @input="Data.aplcSvs = $setMaxLength(Data.aplcSvs, 60)">
          </el-input>
        </div>
        <div class="row">
          <p>適用装置</p>
          <el-input v-model="Data.aplcDev" class="table-input" :class="MacCode ? 'yellow' : ''"
            :disabled="Boolean(MacCode)" @input="Data.aplcDev = $setMaxLength(Data.aplcDev, 60)">
          </el-input>
        </div>

        <div class="row" style="flex-direction: row-reverse;">


          <el-button size="mini" type="default" :disabled="!(Data.literature.startsWith('http://') || Data.literature.startsWith('https://') ||
            Data.literature.startsWith('http:') || Data.literature.startsWith('https:'))"
            @click="openHrefFn">参照</el-button>

          <el-button size="mini" :disabled="!Data.literature" style="margin-right: 15px;"
            @click="copyTextToClipboard(Data.literature)">コピー</el-button>
        </div>

        <div class="row" style="height: auto;">
          <p>文献</p>
          <el-input v-model="Data.literature" class="table-input" :class="MacCode ? 'yellow' : ''"
            :disabled="Boolean(MacCode)" type="textarea" :rows="3" resize="none"
            @input="Data.literature = $setMaxLength(Data.literature, 1000)">
          </el-input>
        </div>

        <div class="footer1" v-if="footer == 'footer1'">
          <el-button @click="$emit('CloseTerm')">Cancel</el-button>
          <el-button class="disBtn" type="primary" @click="addData">編集内容を保存</el-button>
        </div>
        <div class="footer2" v-if="footer == 'footer2'">
          <!-- <el-button @click="$emit('CloseTerm')">Cancel</el-button> -->
          <el-button type="primary" @click="$emit('CloseTerm')">OK</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLineClassMaster, UpdEnvLinecls, addBasicStyleTipsMsg } from "@/api/api";
import { GetLineIndexMsg } from "@/api/api1";
export default {
  props: ["Code", "MacCode", "footer"],
  name: "EnDialog",
  data() {
    return {

      Data: {
        "codName": "",
        "raiting": "",
        "adminCost": "",
        "aplcSvs": "",
        "aplcDev": "",
        "literature": "",
        "code": 0
      }

      // val: "",
      // codName: "",
      // codAbrv: "",
      // codSymb: "",
    };
  },
  components: {},
  watch: {},
  methods: {
    //  copy按钮
    async copyTextToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        console.log('Text copied to clipboard successfully');
        let res = await GetLineIndexMsg({ code: 1 });
        this.$alert(res.data.msg)
      } catch (err) {
        console.error('Failed to copy text: ', err);
      }
    },

    openHrefFn() {
      window.open(this.Data.literature);
    },
    async addData() {
      let result;
      let dataJson = {}
      let res = await addBasicStyleTipsMsg(dataJson);
      result = res.data.data;
      this.$confirm(result, '', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(async () => {
        let res = await UpdEnvLinecls(this.Data);
        if (res.data.code == 0) {
          this.$message.success(res.data.msg);
          this.$emit('CloseTerm');
          return
        }

        this.$alert(res.data.msg, '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });


      }).catch(() => {

      });
    },
    //  获取内容
    async getLineClassMasterFn() {
      let dataJosn = {};
      if (this.MacCode) dataJosn.MacCode = Number(this.MacCode);
      if (this.Code) dataJosn.Code = this.Code;
      let res = await getLineClassMaster(dataJosn);
      this.Data = res.data.data;
    }
  },
  created() { },
  mounted() {
    this.getLineClassMasterFn();
  },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.add-term-dialog {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 8;
}

.term-dialog-content {
  position: absolute;
  width: 558px;
  height: 505px;
  background: #ffffff;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
    0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .title {
    padding: 0 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    border-bottom: 1px solid #f0f0f0;

    .left {
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }

    .el-icon-close {
      font-size: 16px;
      cursor: pointer;
    }
  }

  .dialog-body {
    width: 100%;
    height: calc(100% - 42px);
    padding: 24px;

    .row {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 16px;

      p {
        min-width: 112px;
        text-align: left;
      }

      ::v-deep .el-input {
        // width: calc(100% - 92px);
        height: 32px;
      }

      ::v-deep .el-input__inner {
        // width: calc(100% - 92px);
        height: 32px;
      }
    }

    .row:nth-child(1) {
      ::v-deep .el-input {
        background: rgb(255, 255, 225);
      }

      ::v-deep .el-input__inner {
        background: rgb(255, 255, 225);
      }
    }

    .add-bg {
      ::v-deep .el-input {
        background: rgb(255, 255, 225);
      }

      ::v-deep .el-input__inner {
        background: rgb(255, 255, 225);
      }
    }

    // .row:nth-child(3) {
    //   ::v-deep .el-input {
    //     background: rgb(255, 255, 225);
    //   }
    //   ::v-deep .el-input__inner {
    //     background: rgb(255, 255, 225);
    //   }
    // }
    .footer1 {
      border-top: 1px solid #f0f0f0;
      padding-top: 14px;
      width: 100%;
      display: flex;
      align-items: center;
      // justify-content: flex-end;

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 122px !important;
        height: 32px;
        margin-left: 16px;

        // background: #ffffff;
        // border: 1px solid #d9d9d9;

      }

      button:nth-child(2) {
        // background: #106ebe;
        // color: #fff;
        // border: 0 none;
      }
    }

    .footer2 {
      border-top: 1px solid #f0f0f0;
      padding-top: 14px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 92px !important;
        height: 32px;
        // margin-left: 16px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        border-radius: 2px;
      }

      button:nth-child(1) {
        // background: #106ebe;
        // color: #fff;
        // border: 0 none;
      }
    }
  }
}

.yellow {
  ::v-deep .el-input__inner {
    background: #ffffe1 !important;
  }

  ::v-deep .el-textarea__inner {
    background: #ffffe1 !important;
  }
}

.table-input {
  ::v-deep .el-input__inner {
    color: #515A6E !important;
  }

  ::v-deep .el-textarea__inner {
    color: #515A6E !important;
  }
}
</style>
